<template>
  <!-- {{ multipleSelection }} -->
    <!-- <h1> 商品编号 11000-12999</h1> -->
    <el-button type="success" @click="addBtnFun">
      <el-icon>
      <Plus />
    </el-icon>
      添加</el-button>
 <el-button @click="bigdel" type="danger">
  <el-icon><Delete /></el-icon>
  批量删除</el-button>
   <el-table
   ref="multipleTableRef"
   :data="listone"
   style="width: 100%"
   @selection-change="handleSelectionChange"
 >
   <el-table-column type="selection" width="55" />
   <el-table-column label="商品名称" width="120">
     <template #default="scope">{{ scope.row.configName }}</template>
   </el-table-column>
   <el-table-column property="redirectUrl" label="跳转链接" width="120" />
   <el-table-column property="configRank" label="排序值" />
   <el-table-column property="goodsId" label="商品编号" />
   <el-table-column property="createTime" label="添加时间" />
   <el-table-column  label="操作" >
       <template #default="scope">
       <!-- {{ scope.row.redirectUrl }} -->
       <el-button size="small" type="primary" @click="handlePut(scope.$index, scope.row)">
         修改
       </el-button>
       <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
         删除
       </el-button>
     </template>
   </el-table-column>
 </el-table>
 





  <!-- 弹框 -->
  <el-dialog v-model="dialogFormVisible" :title=title width="500" @closed="closed">
   <!-- 文件 -->
   <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
     class="demo-ruleForm" status-icon>
   

     <el-form-item label="商品名称" prop="configName">
       <el-input v-model="ruleForm.configName" />
     </el-form-item>

     <el-form-item label="跳转链接" prop="redirectUrl">
       <el-input v-model="ruleForm.redirectUrl" />
     </el-form-item>
     <el-form-item label="商品编号" prop="goodsId">
       <el-input v-model="ruleForm.goodsId" />
     </el-form-item>

     <el-form-item label="排序值" prop="configRank">
       <el-input v-model="ruleForm.configRank" />
     </el-form-item>




     <el-form-item>
       <el-button type="primary" @click="submitForm(ruleFormRef)">
         确定
       </el-button>
       <el-button @click="dialogFormVisible = false; ">取消</el-button>
     </el-form-item>
   </el-form>
 </el-dialog>



 <!-- 分页 -->

 <el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total" />


</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { ElTable } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'

import axios from '../../ajax';
let dialogFormVisible = ref(false)
let title = ref('添加')
let carouselId = "";//id

const multipleTableRef = ref()

const multipleSelection = ref([])
const toggleSelection = (rows) => {
 if (rows) {
   rows.forEach((row) => {
     // TODO: improvement typing when refactor table
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     multipleTableRef.value.toggleRowSelection(row, undefined)
   })
 } else {
   multipleTableRef.value.clearSelection()
 }
}
const handleSelectionChange = (val) => {
 multipleSelection.value = val
}
//拿数据
onMounted(()=>{
getdata(1)
})
let listone=ref([])
let total = ref(0)

let getdata=async(pageNumber)=>{
   let {list,totalCount}=await axios.get('/indexConfigs',{
       params:{
           pageNumber,
           pageSize: 10,
           configType: 5
       }
   })
   listone.value=list
   // console.log(list);
 total.value = totalCount

}


//删除
let handleDelete = (i, row) => {
 console.log(row);
 listone.value.splice(i, 1)
 getid([row.configId])
}
let getid = async (ids) => {//拿到id
 let res = await axios.delete('/indexConfigs/delete', {
   data: {
     ids
   }

 })
}
//批量删除

let bigdel = () => {//删除

if (multipleSelection.value.length == 0) {
  // alert("未选择")
  ElMessage.error('未选择!')
}

let arry = []
multipleSelection.value.map(item => arry.push(item.carouselId))

multipleSelection.value.map(item => {
  listone.value.map((items, index) => {
    if (item.carouselId == items.carouselId) {
      console.log(index);
      listone.value.splice(index, 1)
    }
  })
})


getid(arry)
}



let addBtnFun = () => {//添加
 title.value = "添加"
 dialogFormVisible.value = true
 carouselId = '';
 ruleForm.configName= ""
 ruleForm.redirectUrl= ''
 ruleForm.goodsId= ""
 ruleForm.createTime= ""
 ruleForm.configRank= ""

};
const ruleFormRef = ref()

const ruleForm = reactive({
 configName: "",
 redirectUrl: '',
 goodsId: "",
 configType:5,
 configRank:""
})
const rules = reactive({  // 表单验证
 configName: [
   { required: true, message: '名字', trigger: 'blur' },
 ],
 redirectUrl: [
   { required: true, message: '链接', trigger: 'blur' },
 ],
 goodsId: [
   { required: true, message: 'id不能为空', trigger: 'blur' },
 ],
 configRank: [
   { required: true, message: '排序不能为空', trigger: 'blur' },
 ],
})
//弹框
const handleAvatarSuccess = (
 response,
 uploadFile
) => {
 console.log(response);
 ruleForm.configName = response.data
}


//确定
const submitForm = async (formEl) => {
 if (!formEl) return
 await formEl.validate((valid, fields) => {
   if (valid) {//验证通过----ajax
     console.log('submit!')
     if (title.value == '添加') {
       submitfun()
     }else{
       submitfunput()
     }


   } else { // 验证失败
     console.log('error submit!', fields)
   }
 })
}

let submitfun = async () => {//添加
 let res = await axios.post('/indexConfigs', {
   configName: ruleForm.configName,
   configRank: ruleForm.configRank,
   configType: ruleForm.configType,
   goodsId: ruleForm.goodsId,
   redirectUrl: ruleForm.redirectUrl,
 })
 dialogFormVisible.value = false
 getdata(1);
}
let submitfunput = async () => {//修改
 let res = await axios.put('/indexConfigs', {
   configName: ruleForm.configName,
   configRank: ruleForm.configRank,
   configType: ruleForm.configType,
   goodsId: ruleForm.goodsId,
   redirectUrl: ruleForm.redirectUrl,
   configId:carouselId 

 })
 dialogFormVisible.value = false
 getdata(1);
}
//修改
let handlePut = (index, row) => {
 title.value = '修改'
 console.log(row);
 dialogFormVisible.value = true
 carouselId =row.configId,
ruleForm.configName=row.configName,
ruleForm.configRank=row.configRank,
ruleForm.configType=row.configType,
ruleForm.goodsId=row.goodsId,
ruleForm.redirectUrl=row.redirectUrl

}

let currentChange = (page) => {
 console.log(page);
 getdata(page)
}

let closed=()=>{
  
}
</script>

<style  lang="scss" scoped>
.el-pagination {
justify-content: center;
}
</style>